<template>
  <div class="laborUnit" style="position:relative;">
    <!-- logo -->
    <div style="height:140px">
      <div style="height:100px;background:#fff;width:100%">
      <title1 class="topLogo"></title1>
    </div>

    <!--头部面包屑-->
    <div class="breadCrumbBox flexCenter" style="height:40px">
      <div style="width: 1200px;height: 100%;" class="flexAlignCenter">
        <a-breadcrumb separator=">">
          <a-breadcrumb-item :to="home" v-if="homeFlag">
            <router-link :to="home">首页</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item :to="$route.matched[0]" v-if="projectFlag">
            <router-link :to="projectDetail">{{this.projectName}}</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item>
            <router-link :to="construction">{{this.laborName}}</router-link>
          </a-breadcrumb-item>
          <a-breadcrumb-item>{{this.unitName}}</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
    </div>
    </div>
    
    <!-- 顶部内容 -->
    <div class="top flexBetween">
      <div class="logo">
        <div class="logo_text">分包单位</div>
        <!-- <div style="text-align:center">SG-1标</div> -->
      </div>
      <div class="right">
        <div class="title">{{this.laborUnitData.name}}</div>

        <div class="info flexStart3">
          <div class="topInfoList">
            <span>统一信用代码：{{this.laborUnitData.creditCode}}</span>
            <span></span>
          </div>
          <div class="topInfoList">
            <span>类型：{{this.laborUnitData.type}}</span>
            <span></span>
          </div>
          <div class="topInfoList">
            <span>负责人：{{this.laborUnitData.manager}}</span>
            <span></span>
          </div>
          </div>
          <div class="info flexStart3">
          <div class="topInfoList">
            <span>时间：{{moment(this.laborUnitData.contractStartDate).format('YYYY-MM-DD')}}~{{moment(this.laborUnitData.contractEndDate).format('YYYY-MM-DD')}}</span>
            <span></span>
          </div>
          <div class="flexPdf topInfoList">
            <div >分包合同：</div>
            <div style="width:180px">
              <div v-for="(item,index) in this.laborUnitData.contractFileInfoList" :key="index">
                <div @click="showPdf(item.fileUrl)" style="cursor:pointer;">{{item.fileName}}</div>
              </div>
            </div>
          </div>
          <div class="flexPdf topInfoList">
            <div>委托工资支付协议：</div>
            <div style="width:180px">
              <div
                v-for="(item,index) in this.laborUnitData.paymentPackageIdFileInfoList"
                :key="index"
              >
                <div @click="showPdf(item.fileUrl)" style="cursor:pointer;">{{item.fileName}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看pdf -->
    <a-modal
      v-model="visible"
      title
      @ok="handleOk"
      :footer="null"
      :maskClosable="false"
      v-if="visible"
    >
      <embed width="1000" height="700" :src="pdfData" />
    </a-modal>
    <!-- 班组信息 -->
    <div class="teamTem">
      <div
        style="width:1200px;border-bottom:1px solid #ccc;margin-bottom: 30px;height:45px"
        class="marginAuto"
      >
        <div class="team_title">班组信息</div>
      </div>

      <team
        style="width:1200px;border-bottom:1px solid #ccc;"
        class="marginAuto"
        :teamInfo="this.laborUnitData.teamVOList"
      />
    </div>
    <div style="position:absolute;bottom:0;width: 100%;z-index:5;">
      <supportCompany></supportCompany>
    </div>
  </div>
</template>

<script>
import title1 from '@/views/title/index.vue'
import team from './team/index'
import supportCompany from '@/views/supportCompany/index.vue'
import { getLabourOrg } from '@/api/construction'
import moment from 'moment'
export default {
  components: {
    title1,
    team,
    supportCompany
  },
  data() {
    return {
      home: '/gateway',
      projectDetail: '/projectDetails',
      construction: '/fu/construction',
      visible: false,
      laborUnitData: {},
      pdfData: '',
      projectName: '',
      laborName: sessionStorage.getItem('laborName'),
      unitName: sessionStorage.getItem('unitName'),
      homeFlag: JSON.parse(sessionStorage.getItem('homeFlag')),
      projectFlag: JSON.parse(sessionStorage.getItem('projectFlag'))
    }
  },
  mounted() {
    window.scrollTo(0, 0)
    if (sessionStorage.getItem('imgdata')) {
      this.projectName = JSON.parse(sessionStorage.getItem('imgdata')).fullName
    }
    getLabourOrg({ id: sessionStorage.getItem('laborVoListId'), projectId: sessionStorage.getItem('projectId') }).then(
      (res) => {
        let data = res.data.data
        data.teamVOList.forEach((item) => {
          item.key = item.id
        })
        this.laborUnitData = data
        // console.log(this.laborUnitData.teamVOList);
      }
    )
  },
  methods: {
    moment,
    pdfDow() {
      window.open(
        'http://it-jhkj.zhinengjianshe.com/uploadfile/temp/device/2cd6a578de5d447cbcc70fd857b3b31c/2cd6a578de5d447cbcc70fd857b3b31c.pdf'
      )
    },
    showPdf(val) {
      // console.log(val);

      this.pdfData = val
      //  console.log(this.pdfData);
      this.visible = true
    },
    handleOk(e) {
      //   console.log(e);
      this.visible = false
    },
    peopleDetail() {
      this.$router.push({ path: '/personnelInformation' })
    }
  }
}
</script>

<style scoped>
.laborUnit {
  width: 100%;
  margin: 0 auto;
  min-height: 100%;
  padding-bottom: 50px;
  background: #ffffff;
}
.topLogo {
  position: fixed;
  width: 100%;
  /* left: calc(50% - 650px); */
  top: 0;
  z-index: 11;
  background: #ffffff;
}
.breadCrumbBox {
  width: 100%;
  height: 40px;
   z-index: 8;
  background-color: rgba(246, 248, 249, 1);
}
.top,
.teamTem {
  width: 1200px;
  margin: 0 auto;
}
.teamTem {
  width: 100%;
  background: #fff;
  margin-bottom: 50px;
}
.top {
  /* width: 1200px;
  margin: 0 auto; */
  margin-bottom: 20px;
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 31px;
  padding-top: 40px;
  margin-bottom: 70px;
  /* height: 300px; */
}
.logo {
  margin-right: 41px;
}
.logo_text {
  width: 140px;
  height: 140px;
  background: #00cc00;
  color: #ffffff;
  line-height: 50px;
  font-size: 38px;
  padding: 20px 33px 24px 31px;
}
.right {
  width: 1019px;
}
.title {
  font-size: 24px;
  line-height: 31px;
  margin-bottom: 22px;
}
.info {
  font-size: 15px;
  color: #333333;
  line-height: 31px;
  width: 1019px;
  /* height: 160px; */
  background: #f5faff;
  padding: 10px 30px;
}
.topInfoList {
  flex: 1;
}
.info div :nth-child(2) {
  color: #1890ff;
  cursor: pointer;
}

.team_title {
  width: 90px;
  height: 45px;
  font-size: 16px;
  line-height: 45px;
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
  text-align: center;
  margin-left: 30px;
}
::v-deep .ant-modal {
  width: 1080px !important;
  top: 10px;
}
::v-deep .ant-modal-body {
  padding: 40px;
  height: 780px;
}
::v-deep .ant-breadcrumb > span:last-child {
  color: rgba(20, 146, 255, 1);
}
.flexPdf {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.flexStart2 {
  flex-wrap: wrap;
  align-items: center;
}
.marginAuto {
  margin: 0 auto;
}
::v-deep .ant-table-placeholder {
  border-bottom: none;
}
</style>
